<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
      svg {
        width:  700px;
        height: 700px;
        background: rgba(200,200,200,0.5);
      }
      text {
        fill: #333;
        alignment-baseline: auto;
        cursor: text;
        letter-spacing: 10px;
      }
      .text1 {
        dominant-baseline: auto;
        alignment-baseline: middle;
        baseline-shift: 1px;
        direction: ltr;
        font: bold italic large Palatino, serif;
        font-stretch: narrower;
        text-anchor: start;
        text-decoration: underline;
        text-rendering: optimizeSpeed;
        unicode-bidi: bidi-override;
        word-spacing: 10px;
        white-space: pre-wrap;
      }
      .text2 {
        dominant-baseline: central;
        alignment-baseline: central;
        baseline-shift: baseline;
        direction: rtl;
        font-family: san-serif;
        font-size-adjust: 1.2;
        font-stretch: wider;
        font-style: italic;
        font-variant:  small-caps;
        font-weight: bold;
        glyph-orientation-vertical: 90deg;
        text-anchor: middle;
        text-rendering: optimizeLegibility;
        unicode-bidi: isolate-override;
        word-spacing: 10;
        white-space: pre-line;
        writing-mode: rl;
      }
      rect {
        stroke-width: 5px;
        flood-color: blue;
        flood-opacity: 0.2;
        lighting-color: green;
        stop-color: black;
        stop-opacity: 0.2;
      }
      .rect1 {
        stroke: red;
        cursor: pointer;
        fill: rgb(200,100,100);
        clip-path: inset(0px 0px 0px 0px round 10px 10px / 10px 10px );
        -webkit-clip-path: inset(0px 0px 0px 0px round 10px 10px / 10px 10px );
        color-interpolation: sRGB;
        color-rendering: auto;
        fill-opacity: 90%;
        fill-rule: evenodd;
        shape-rendering: auto;
      }
      .rect2 {
        stroke: red;
        fill: rgb(200,100,100);
        clip-path: circle(50px at center);
        -webkit-clip-path: circle(50px at center);
        color-interpolation: linearRGB;
        color-rendering: optimizeSpeed;
        fill-opacity: 0.5;
        fill-rule: nonzero;
        shape-rendering: optimizeSpeed;
      }
      .rect3 {
        stroke: red;
        fill: rgb(200,100,100);
        clip-path: ellipse(20px 50px at 50px 50px);
        -webkit-clip-path: ellipse(20px 50px at 50px 50px);
        color-interpolation: auto;
        color-rendering: optimizeQuality;
        shape-rendering: crispEdges;
      }
      .rect4 {
        stroke: red;
        fill: rgb(200,100,100);
        -webkit-clip-path: polygon(evenodd, 50px 0px, 20px 100px, 100px 40px, 0px 40px, 80px 100px);
        clip-path: polygon(evenodd, 50px 0px, 20px 100px, 100px 40px, 0px 40px, 80px 100px);
        opacity: 0.8;
        shape-rendering: geometricPrecision;
      }
      .rect5 {
        stroke: red;
        fill: rgb(200,100,100);
        -webkit-clip-path: url(#Clip);
        clip-path: url(#Clip);
      }
      .rect6 {
        stroke: red;
        fill: rgb(200,100,100);
      }
      .rect11 {
        stroke: red;
        fill: rgb(200,100,100);
        -webkit-filter: blur(0.5em);
        filter: blur(0.5em);
      }
      .rect12 {
        stroke: red;
        fill: rgb(200,100,100);
        -webkit-filter: brightness(20%);
        filter: brightness(20%);
      }
      .rect13 {
        stroke: red;
        fill: rgb(200,100,100);
        -webkit-filter: drop-shadow(0.5em 0.5em #FF0000);
        filter: drop-shadow(0.5em 0.5em #FF0000);
      }
      .rect14 {
        stroke: red;
        fill: rgb(200,100,100);
        -webkit-filter: sepia(90%);
        filter: sepia(90%);
      }
      .rect15 {
        stroke: red;
        fill: rgb(200,100,100);
      }
      .rect21 {
        fill: rgb(200,100,100);
        paint-order: stroke markers;
        pointer-events: stroke;
      }
      .rect22 {
        fill: red;
        stroke: url(#Gradient);
        mask: url(#Mask);
      }
      .rect22_2, .rect23_2 {
        fill: green;
      }
      .rect23 {
        fill: red;
      }
      .rect24 {
        visibility: hidden;
      }
      .mask {
        fill: url(#Gradient);
      }
      .path1 {
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-miterlimit: 2;
        stroke: blue;
        stroke-width: 5;
        stroke-opacity: 0.5;
      }
      .image1 {
        image-rendering: optimizeSpeed;
      }
      .image2 {
        image-rendering: optimizeQuality;
      }
      .line1 {
        marker-start: url(#m1);
        marker-end: url(#m2);
        stroke: blue;
        stroke-dasharray: 2 2%;
        stroke-dashoffset: 50%;
      }
      .line2 {
        marker: url(#m1);
        stroke: blue;
      }
      .line3 {
        stroke: blue;
      }
      .rect30 {
        fill: none;
        stroke: red;
        vector-effect: non-scaling-stroke;
      }
      clipPath {
        clip-rule: evenodd;
      }
    </style>
</head>
<body>
  <svg class="graphic_1" version="1.1" xmlns="http://www.w3.org/2000/svg">

    <defs>
      <marker id="m1" viewBox="0 0 10 10" refX="5" refY="5"
       markerWidth="8" markerHeight="8">
        <circle cx="5" cy="5" r="5" fill="green"></circle>
      </marker>
      <marker id="m2" viewBox="0 0 10 10" refX="5" refY="5"
       markerWidth="8" markerHeight="8">
        <circle cx="5" cy="5" r="5" fill="red"></circle>
      </marker>
      <marker id="m3" viewBox="0 0 10 10" refX="5" refY="5"
       markerWidth="8" markerHeight="8">
        <circle cx="5" cy="5" r="5" fill="blue"></circle>
      </marker>
      <linearGradient id="Gradient">
        <stop offset="0" stop-color="white" stop-opacity="0"></stop>
        <stop offset="1" stop-color="white" stop-opacity="1"></stop>
      </linearGradient>
      <mask id="Mask">
        <rect class="mask" x="120" y="430" width="100" height="100" ></rect>
      </mask>
      <mask id="Mask2">
        <rect x="230" y="430" width="100" height="100" fill="url(#Gradient)"></rect>
      </mask>
      <clipPath id="Clip">
        <path class="path1" d="M 100 120 L 740 200 L 100 280 L 740 100 L 640 180 z"></path>
      </clipPath>
      <cursor id="Cursor" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/cursor.svg" x="32" y="32">
      </cursor>
      <filter id="Filter">
        <feColorMatrix type="saturate" values="0"></feColorMatrix>
      </filter>
    </defs>

    <line x1="10" y1="40" x2="233" y2="40" stroke="red" stroke-dasharray="2"></line>
    <line x1="10" y1="80" x2="233" y2="80" stroke="red" stroke-dasharray="2"></line>

    <text class="text1" x="20" y="40" text-anchor="start">日本語abc</text>
    <text class="text2" x="220" y="80" text-anchor="start">日本語abc</text>

    <rect class="rect1" x="10" y="110" width="100" height="100"></rect>
    <rect class="rect2" x="120" y="110" width="100" height="100"></rect>
    <rect class="rect3" x="230" y="110" width="100" height="100"></rect>
    <rect class="rect4" x="340" y="110" width="100" height="100"></rect>
    <rect class="rect5" x="450" y="110" width="100" height="100"></rect>
    <rect class="rect6" x="560" y="110" width="100" height="100" clip-path="url(#Clip)"></rect>

    <rect class="rect11" x="10" y="220" width="100" height="100"></rect>
    <rect class="rect12" x="120" y="220" width="100" height="100"></rect>
    <rect class="rect13" x="230" y="220" width="100" height="100"></rect>
    <rect class="rect14" x="340" y="220" width="100" height="100"></rect>
    <rect class="rect15" x="450" y="220" width="100" height="100" filter="url(#Filter)"></rect>

    <image class="image1" xlink:href="./img/50x50.png" x="10" y="330" height="50px" width="50px"></image>
    <image class="image2" xlink:href="./img/50x50.png" x="70" y="330" height="50px" width="50px"></image>

    <line class="line1" x1="10" y1="400" x2="233" y2="400"></line>
    <line class="line2" x1="10" y1="410" x2="233" y2="410" marker="url(#m1)"></line>
    <line class="line3" x1="10" y1="420" x2="233" y2="420"
      marker-start='url(#m1)' marker-end="url(#m2)" marker-mid="URL(#m3)"></line>

    <rect class="rect21" x="10" y="430" width="100" height="100"></rect>
    <rect class="rect22_2" x="120" y="430" width="100" height="100" fill="green"></rect>
    <rect class="rect22" x="120" y="430" width="100" height="100"></rect>
    <rect class="rect23_2" x="230" y="430" width="100" height="100" fill="green"></rect>
    <rect class="rect23" x="230" y="430" width="100" height="100"
      mask="url(#Mask2)" cursor="url(#Cursor),crosshair" stroke="url(#Gradient)"></rect>
    <path class="path1" d="M 340 430 L 440 480 L 340 520 L 380 420 z" marker-mid="URL(#m3)"></path>
    <rect class="rect24" x="450" y="430" width="100" height="100"></rect>
  </svg>
  <svg class="graphic_2" version="1.2" viewBox="-100 -100 200 200">
    <rect class="rect30" x="-20" y="-20" width="40" height="40" rx="5" ry="5">
      <animateTransform attributeName="transform" type="scale" values="1,1;5,5;1,1" keyTimes="0;0.5;1" repeatCount="indefinite" begin="0s" dur="5s"></animateTransform>
    </rect>
  </svg>
</body>
</html>
